<template>
	<view class="container">
		<view class="print">
			<view class="printname">SunmiPrint<text class="green" v-if="IsConn">（已连接）</text><text class="red" v-else>（连接中...）</text></view>
		</view>
		<view class="square">
			<view class="title">{{ComName}}</view>
			<view class="subtitle">违法停车告知单</view>
			<view class="line">告知单编号 : {{Info.Num}}</view>
			<view class="line">车牌号 : {{Info.CarNum}}</view>
			<view class="line">违停时间 : {{Info.CreateDate.ToMinute()}}</view>
			<view class="line">违停地点 : {{Info.Address}}</view>
			<view class="line">{{ParkGaoZhi}}</view>
			<view class="line" style="margin-top:50rpx;">地址 : {{Address}}</view>
			<view class="line">联系电话 : {{Phone}}</view>
			<!-- <view class="line">执法人员 : {{Info.ZBRRealName}}</view> -->
			<view class="imgview">
				<view class="img1"><image :src="Ewm"/></view>
				<view class="img2"><image :src="Chapter"/></view>
			</view>
			<view class="scan"><view class="txt1">扫一扫 ，查违章</view><view class="txt2">{{Info.CreateDate.ToDateTwo()}}</view></view>
		</view>
		<yz-qr :qrPath.sync="Ewm" :text="Path" quality="L" colorDark="#000000" colorLight="#ffffff" style="position: absolute; left:-1000px;"></yz-qr>
		<canvas :style="'width: 192px; height: 100px; position: absolute; left:-1000px; bottom:-1000px;'" canvas-id="chapter"></canvas>
		<view class="btn">
			<button class="publishs" @click="Print" v-if="IsReady && IsConn">打印</button>
			<button class="publishs graybg" v-else>请稍候...</button>
		</view>
	</view>
</template>

<script>
	//#ifdef APP
	const print = uni.requireNativePlugin('Sunmi-Print-Inner')
	//#endif
	export default {
		data() {
			return {
				ID: 0,
				Info: {ID: 0,SignName: ''},
				EasyCauseAction: {ID: 0},
				Chapter:'',
				Ewm: '',
				Path: '',
				Address:'',
				Phone:'',
				IsConn:false,
				IsReady:false,
				SignNameBase64:'',
				ChapterBase64: '',
				ComName:'',
				ParkGaoZhi:''
			};
		},
		onLoad(options) {
			this.ID = options.ID;
			this.Find_ParkInfo();
			print.connect(res => {
				this.IsConn = res.connect == "hello"
			})
		},
		onUnload() {
			print.disconnect();
		},
		methods: {
			Find_ParkInfo() {
				var data = {};
				data.ID = this.ID;
				data.Act = "Find_ParkInfo";
				data.Type = 1;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json => {
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.Phone = json.Data.Phone;
					this.Address = json.Data.Address;
					this.Path = json.Data.Domain + "/?i=" + json.Data.Info.ID;
					this.ParkGaoZhi=json.Data.ParkGaoZhi;
					this.Chapter = json.Data.Chapter;
					this.ComName=json.Data.ComName;
					this.GetEwm(() => {
						this.Util.InitImg_Park_Sunmi(this.Ewm, this.Chapter,() => {
							this.Util.GetBase64("chapter", 192, 100 , data=>{
								this.IsReady = true;
								this.ChapterBase64 = data;
							});
						});
					});
				});
			},
			GetEwm(callback) {
				var time = setInterval(() => {
					if (this.Ewm != "") {
						clearInterval(time);
						if (callback) {
							callback();
						}
					}
				}, 200);
			},
			Print() {
				if(!this.IsConn){
					this.Util.Toast("打印机尚未就绪，请稍后再试！");
					return;
				}
				this.Util.Loading("打印中...");
				print.printText({text:this.ComName,align:1,size:36, bold:true});
				print.printText({text:"违法停车告知单",align:1,size:30, bold:true});
				print.printDividingline({style:"4",height:"30"}); //换行
				print.printText({text:"告知单编号: " + this.Info.Num ,align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"5"}); //换行
				print.printText({text:"车牌号:" + this.Info.CarNum, align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"5"}); //换行
				print.printText({text:"违停时间: " + this.Info.CreateDate.ToMinute() ,align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"5"}); //换行
				print.printText({text:"违停地点: " + this.Info.Address,align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"20"}); //换行
				print.printText({text: this.ParkGaoZhi ,align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"20"}); //换行
				print.printText({text:"地址: "+ this.Address,align:0,size:28, bold:true});
				print.printText({text:"联系电话: "+ this.Phone,align:0,size:28, bold:true});
				print.printDividingline({style:"4",height:"30"}); //换行
				print.printBitmap({base64:this.ChapterBase64,align:0});
				print.printText({text:"扫一扫，查违章      " + this.Info.CreateDate.ToDateTwo() ,align:0,size:24, bold:true});
				print.printDividingline({style:"4",height:"150"}); //换行
				this.Util.HideLoading();
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 140rpx;

		.print {
			width: 100%;
			height: 90rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			padding-left: 3%;
			display: flex;
			flex-direction: row;

			.printname {
				flex: 1;
			}

			.printbtn {
				width: 150rpx;
			}
		}

		.square {
			width: 94%;
			margin-left: 3%;
			height: auto;
			border-radius: 10rpx;
			background-color: #ffffff;
			padding: 40rpx;
			display: flex;
			flex-direction: column;

			.title {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 40rpx;
				text-align: center;
			}

			.subtitle {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				text-align: center;
			}

			.line {
				width: 100%;
				height: auto;
				min-height: 50rpx;
				line-height: 50rpx;
				margin-top: 20rpx;
				font-size: 32rpx;
				color: #696969;
			}
			.imgview{display: flex; flex-direction: row; justify-content: space-between; margin-top:20rpx;
				.img1{width:240rpx; height:240rpx; margin-top:10rpx; float:left; image{width:100%; height:100%;}}
				.img2{width:240rpx; height:240rpx; float:left; image{width:100%; height:100%;}}
			}
			.scan{width:100%; height:32rpx; font-size:32rpx; padding-top:10rpx; display: flex; flex-direction: row; justify-content: space-between;
				.txt1{width:240rpx; text-align: center;}
				.txt2{width:240rpx; text-align: center;}
			}
		}
	}
</style>